<template>
  <div class="login-bg">
    <div class="login-card">
      <div class="login-header">
        <div class="logo-circle">
          <svg class="logo-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h2 class="brand-title">数字心桥</h2>
      </div>
      <div class="tabs">
        <button :class="{ active: activeTab === 'login' }" @click="activeTab = 'login'">登录</button>
        <router-link to="/register" class="register-tab">注册</router-link>
      </div>

      <h3 class="login-title">欢迎登录</h3>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="login-username">用户名</label>
          <input type="text" id="login-username" v-model="loginForm.username" required autocomplete="username">
        </div>
        <div class="form-group">
          <label for="login-password">密码</label>
          <input type="password" id="login-password" v-model="loginForm.password" required autocomplete="current-password">
        </div>
        <p v-if="loginError" class="error-message">{{ loginError }}</p>
        <button type="submit" class="login-btn">登录</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../store/user';

const router = useRouter();
const userStore = useUserStore();

const loginForm = reactive({
  username: '',
  password: '',
});

const loginError = ref('');

const handleLogin = async () => {
  loginError.value = '';
  try {
    await userStore.login(loginForm.username, loginForm.password);
    if (userStore.userType === 'therapist') {
      router.push('/therapist/dashboard');
    } else if (userStore.userType === 'parent') {
      router.push('/parent/dashboard');
    } else {
      router.push('/');
    }
  } catch (err) {
    console.error('Login failed:', err);
    loginError.value = err.response?.data?.message || err.message || '登录失败，请稍后再试';
  }
};
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 50%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.login-bg::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #a5b4fc55 60%, transparent 100%);
  border-radius: 50%;
  z-index: 1;
}
.login-bg::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #c4b5fd55 60%, transparent 100%);
  border-radius: 50%;
  z-index: 1;
}
.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px 0 rgba(80, 80, 180, 0.10), 0 1.5px 6px 0 rgba(120, 80, 200, 0.08);
  padding: 2.5rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(2px);
}
.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.2rem;
}
.logo-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px 0 #a5b4fc33;
}
.logo-svg {
  width: 32px;
  height: 32px;
  color: #fff;
}
.brand-title {
  font-size: 1.5rem;
  font-weight: bold;
  background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  letter-spacing: 2px;
}
.login-title {
  font-size: 1.2rem;
  color: #6366f1;
  font-weight: 500;
  margin-bottom: 1.5rem;
  text-align: center;
}
.tabs {
  display: flex;
  margin-bottom: 1.5rem;
  background-color: #f3e8ff;
  border-radius: 0.75rem;
  padding: 0.25rem;
}
.tabs button {
  flex: 1;
  padding: 0.75rem 0;
  border: none;
  background-color: transparent;
  color: #6b7280;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background-color 0.3s, color 0.3s;
}
.tabs button.active {
  background-color: #fff;
  color: #6366f1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.register-tab {
  flex: 1;
  padding: 0.75rem 0;
  border: none;
  background-color: transparent;
  color: #6b7280;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background-color 0.3s, color 0.3s;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-group {
  margin-bottom: 1.2rem;
  width: 100%;
}
label {
  display: block;
  margin-bottom: 0.4rem;
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
}
input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid #c7d2fe;
  border-radius: 0.75rem;
  font-size: 1rem;
  outline: none;
  background: #f8fafc;
  transition: border 0.2s;
}
input:focus {
  border-color: #6366f1;
  background: #fff;
}
.login-btn {
  width: 100%;
  padding: 0.9rem 0;
  background: linear-gradient(90deg, #6366f1 0%, #a21caf 100%);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px 0 #a5b4fc33;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.login-btn:hover {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 4px 16px 0 #a5b4fc44;
  transform: translateY(-2px) scale(1.01);
}
.error-message {
  color: #ef4444;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
}
</style>